<template>
  <div class="report-table" v-loading="loading" element-loading-background="rgba(255, 255, 255,1)">
    <table
      class="table-wrapper"
      border="0"
      cellspacing="0"
      cellpadding="0"
    >
      <tr height="40">
        <td width="12%" align="center">文种</td>
        <td width="35%">
          <el-select size="small" v-model="document.paper_classfiy" placeholder="请选择">
            <el-option
              v-for="item in paperClassifyOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </td>
        <td width="12%" align="center">发文字号</td>
        <td width="35%">
          <el-input v-model="document.issued_number"></el-input>
        </td>
      </tr>
      <tr height="40">
        <td align="center">文件标题</td>
        <td colspan="4">
          <el-input v-model="document.title"></el-input>
        </td>
      </tr>
      <tr height="40">
        <td width="12%" align="center">缓急程度</td>
        <td width="35%">
          <el-radio-group class="radio-group" v-model="document.emergency">
            <el-radio label="普通">普通</el-radio>
            <el-radio label="紧急">紧急</el-radio>
            <el-radio label="特急">特急</el-radio>
          </el-radio-group>
        </td>
        <td width="12%" align="center">印刷份数</td>
        <td width="35%">
          <el-input type="text" @input="change"
        @change="change"
        :value="inpNum"></el-input>
        </td>
      </tr>
      <tr height="40">
        <td width="10%" align="center">发文目标</td>
        <td width="35%">
          <el-radio-group class="radio-group" v-model="document.postTarget">
            <el-radio label="内部">内部</el-radio>
            <el-radio label="外部">外部</el-radio>
          </el-radio-group>
        </td>
        <td width="12%" align="center">公文分类</td>
        <td width="35%">
          <el-radio-group class="radio-group" v-model="document.documentType">
            <el-radio label="普通文件">普通文件</el-radio>
            <el-radio label="盖章文件">盖章文件</el-radio>
            <el-radio label="正式文件">正式文件</el-radio>
          </el-radio-group>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getPaperClassify, createDocument } from "@/api/document.js";
import { changeNumMoneyToChinese } from "@/utils/index";

export default {
  name: "reportTable",
  filters: {
    formatPriceMoney: function(val) {
      if (!val) return "";
      let value = val.toFixed(2);
      return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    formatPriceUpper: function(val) {
      if (!val) return "";
      let value = val.toFixed(2);
      return changeNumMoneyToChinese(value);
    },
    formatDate: function(val) {
      if (!val) return "";
      let date = val.split("T")[0];
      return date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日");
    }
  },
  data() {
    return {
      document: {
        paper_classfiy: 4,
        documentType: "普通文件",
        title: "",
        issued_number: "",
        postTarget: "内部",
        emergency: "普通",
        printAmount: 0
      },
      paperClassifyOptions: [],
      loading: false
    };
  },
  computed: {
        inpNum () {
            return this.document.printAmount
        }
    },
  created() {
    this.resquestAssessDetail();
  },
  watch:{
      'document.printAmount'(val){
          return val.toString().replace(/\D+/g,'')
      }
  },
  methods: {
      change (value) {
            let val = value.trim()
            // 只能是正整数或空,可根据需求修改正则
            if (/^[1-9]\d*$|^$/.test(val)) {
                this.document.printAmount = val
            } else {
                value = this.document.printAmount
            }
        },
    resquestAssessDetail() {
      // 获取文种信息
      getPaperClassify().then(res => {
        this.paperClassifyOptions = res.data.results;
      });
    }
  }
};
</script>
<style media="printContent">
@page {
  size: auto; /* auto is the initial value */
  margin: 0mm 15mm 0;
}
</style>
<style lang="scss">
.report-table {
    table{
      border-collapse:collapse;
      border:none;
    }
    table td{
      border: 1px solid red;
    }
  .table-wrapper {
    width: 100%;
    font-size: 14px;
    /* border-color: #f6f6f6; */
    margin: 0 auto;
    .radio-group {
      margin-left: 15px;
    }
    .el-input__inner {
      background-color: transparent;
      border: 0;
    }
  }
}
</style>
